<template>
  <div class="invite-container">
    <div class="content">
      <div class="reward-box">
        <img src="@/assets/image/yq.png" alt="奖励宝箱" />
        <div class=" text-[20px] font-bold text-[#75500C]">+{{bindData?.bind_coins}} {{t('home.coins')}}</div>
      </div>

      <div class="invite-section">
        <div class="invite-title">{{ t('invite.bindFriendCode') }}</div>
        <input 
          type="text" 
          class="invite-input" 
          :placeholder="t('invite.inputPlaceholder')"
          v-model="inviteCode"
        />
        <div class="notice">{{ t('invite.bindNotice') }}</div>
        <div class="flex items-center justify-center mt-[30px]">
          <button class="submit-btn" @click="handleSubmit">{{ t('invite.submitButton') }}</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import api from '@/api/api'
import type {InviteBindResponse} from "@/types/types"
import {useAutoRequest} from "@/hooks/loading"
import {showToast} from "vant"
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const route = useRoute()
const inviteCode = ref('')
const bindData = ref<InviteBindResponse | null>(null)
const [loading, submit] = useAutoRequest(api.inviteBindSubmit)
const handleSubmit = async () => {
  if (!inviteCode.value) {
    showToast(t('invite.toast.pleaseInput'))
    return
  }
  await submit({
    mentor_invite_code: inviteCode.value,
    package_name: package_name.value,
    device_id: device_id.value
  })
  showToast(t('invite.toast.bindSuccess'))
}

const package_name = ref<string | undefined>(route.query.package_name?.toString())
const device_id = ref<string | undefined>(route.query.device_id?.toString())

const [loadingMentees, inviteBind] = useAutoRequest(api.inviteBind)
const getData = async ()=> {
  const res = await inviteBind({
    package_name: package_name.value,
    device_id: device_id.value
  })
  bindData.value = {
    ...res
  }
  
  
}
watchEffect(()=> {
  console.log(package_name.value, device_id.value);
  if(package_name.value && device_id.value) {
    getData()
  }
})

</script>

<style lang="scss" scoped>
.invite-container {
  max-width: 800px;
  margin: 0 auto;
  height: 100vh;
  background: linear-gradient( 180deg, #FFE592 7%, #F6F6F6 53%);
  .header {
    text-align: center;
    font-size: 20px;
    padding: 15px 0;
    font-weight: bold;
  }

  .content {
    padding: 20px;

    .reward-box {
      text-align: center;
      margin: 20px 0;
      
      img {
        width: 200px;
        height: 200px;
      }

      .coins {
        font-size: 18px;
        font-weight: bold;
        margin-top: 10px;
      }
    }

    .invite-section {
      .invite-title {
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
        color: #333;
      }

      .invite-input {
        width: 100%;
        height: 44px;
        border: none;
        border-radius: 24px;
        padding: 0 20px;
        font-size: 16px;
        background: #fff;
        margin-bottom: 15px;
        outline: none;

        &::placeholder {
          color: #999;
        }
      }

      .notice {
        font-size: 12px;
        color: #999999;
        margin-bottom: 10px;
      }

      .submit-btn {
        width: 350px;
        font-size: 16px;
        height: 49px;
        background-color: #12CA74;
        color: white;
        border: none;
        border-radius: 30px;
        cursor: pointer;
       
      }
    }
  }
}
</style>
